<template>
  <div id="app">
    <head-bar :title="title"></head-bar>
    <section class="app-main">
      <transition name="h-fade">
        <router-view class="animated"></router-view>
      </transition>
    </section>
    <foot-bar></foot-bar>
  </div>
</template>

<script>
import HeadBar from '@/components/HeadBar'
import FootBar from '@/components/FootBar'
export default {
  name: 'app',
  components: {
    HeadBar,
    FootBar
  },
  data () {
    return {
      channel: '',
      material: ''
    }
  },
  computed: {
    category () {
      return `${this.channel}${this.material ? `-${this.material}` : ''}`
    },
    title () {
      return this.$route.name
    }
  },
  created () {
    this.channel = this.$route.query.channel
    this.material = this.$route.query.material
    if (this.channel) {
      if (this.material) {
        this.fnStatistics(this.material, this.channel)
      } else {
        this.fnStatistics(this.channel)
      }
    }
  },
  methods: {
    fnAdStat (msg) {
      this.fnStatistics(msg, this.category)
    },
    fnStatistics (msg, category = '小额贷款') {
      window.ga && window.ga('send', 'event', category, 'click', msg)
    }
  }
}
</script>

<style lang="scss">
@import '~@/scss/base.scss';
html, body{
  margin: 0px;
  padding: 0px;
  background: $bg;
  color: $default-color;
}
.app-main{
  padding-top: 40px;
  padding-bottom: 50px;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */  
[class*='-enter-active'] {
  transition: all .8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
[class*='-leave-active'] {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
/* 纵向移动 */
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
  transform: translateY(10px);
  opacity: 0;
}
/* 横向移动 */
.h-fade-enter, .h-fade-leave-to
/* .h-fade-leave-active for <2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>
